﻿@using MvcApplicationTest.Models
@using MvcApplicationTest.Controllers
@model IndexModel
@{
    ViewBag.Title = "Home Page";
}
@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>@ViewBag.Title.</h1>
                <h2>@ViewBag.Message</h2>
            </hgroup>
            <p>
                To learn more about ASP.NET MVC visit
                <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
                The page features <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET MVC.
                If you have any questions about ASP.NET MVC visit
                <a href="http://forums.asp.net/1146.aspx/1?MVC" title="ASP.NET MVC Forum">our forums</a>.
            </p>
        </div>
    </section>
}
<div>
    <table>
        <tr>
            <td>
                <div>
                    <h3>We suggest the following:</h3>
                    <ol class="round">
                        <li class="one">
                            <h5>Which you want</h5>
                            <a href="#" name="WhickUWant" onclick="WhichUWant_OnClick()" isauthenticated="@ViewBag.IsAuthenticated.ToString()">Click here</a>
                            <div name="AllOrdersForm" style="display: none">
                                @using (Html.BeginForm())
                                {
                                    @Html.LabelFor(m => m.AllOrders)
                                    @Utility.CheckBoxListFor("allOrders", Model.AllOrders)
                                    <input type="button" value="ok" onclick="GetCheckBoxList()" style="width: 60px">
                                    <input type="button" value="cancel" onclick="CancelWhichUWant_OnClick()" style="width: 60px">
                                }
                            </div>
                        </li>

                        <li class="two">
                            <h5>Order Now</h5>
                            <a name="OrderNow" href="#" isauthenticated="@ViewBag.IsAuthenticated.ToString()" onclick="OrderNoW_OnClick()">Click here</a>
                        </li>

                        <li class="three">
                            <h5>You can leave a message here:</h5>
                            <p>
                                <textarea id="LeaveMessage" wrap="soft" style="width: 200px;"></textarea>
                            </p>
                            <p>
                                <input type="button" value="clear" onclick="ClearMessageBtn_OnClick()" />
                                <input type="button" value="ok" onclick="LeaveMessageBtn_OnClick()" />
                            </p>
                        </li>
                    </ol>
                </div>
            </td>

            <td>
                <div style="width: 100px"></div>
            </td>

            <td>
                <div style="vertical-align: top">
                    <ul id="displayMessage">
                    </ul>
                </div>
            </td>
        </tr>
    </table>
</div>
</div>

<script type="text/javascript">
    function GetCheckBoxList() {
        $("a[name=WhickUWant]").css("display", "block");
        $("div[name=AllOrdersForm]").css("display", "none");
        var obj = [];
        var $checkBoxList = $("input[name=allOrders]");
        for (var i = 0; i < $checkBoxList.length; i++) {
            if ($checkBoxList[i].checked) {
                obj.push($checkBoxList[i].value + "|" + $($checkBoxList[i]).attr("text"));
            }
        }
        var str = obj.toString();
        $.ajax({
            type: "POST",
            url: "/Home/WhichUWant",
            datatype: "json",
            data: { "str": str },
            async: false,
            success: function (result) {
            },
            error: function (error) {
            }
        });
    }

    function CancelWhichUWant_OnClick() {
        $("div[name=AllOrdersForm]").css("display", "none");
        $("a[name=WhickUWant]").css("display", "block");
    }

    function WhichUWant_OnClick() {
        //$("div[name=AllOrdersForm]").css("display", "block");
        //$("a[name=WhickUWant]").css("display", "none");
        if ("True" == $("a[name=WhickUWant]").attr("isauthenticated")) {
            $("div[name=AllOrdersForm]").css("display", "block");
            $("a[name=WhickUWant]").css("display", "none");
        }
        else {
            alert("Please login first.");
        }
    }

    function OrderNoW_OnClick() {
        var $orderNowLink = $("a[name=OrderNow]");
        if ("True" == $orderNowLink.attr("isauthenticated")) {
            $.ajax({
                type: "POST",
                url: "/Home/HasBalance",
                datatype: "json",
                async: false,
                success: function (result) {
                    if ("true" == JSON.parse(result).toString()) {
                        window.location = "/Home/OrderPage";
                        return;
                    }
                    alert("Sorry, u don't have enough money.");
                },
                error: function (error) {
                }
            });

        }
        else {
            alert("Please login first.");
        }
    }

    function LeaveMessageBtn_OnClick() {
        var message = $("#LeaveMessage").val();
        $.ajax({
            type: "POST",
            url: "/Home/LeaveMessage",
            datatype: "json",
            async: false,
            data: { "str": message },
            success: function (result) {
                if ("True" == result) {
                    alert("u can't leave null message.");
                }
                else {
                    $("#displayMessage").append(result);
                }

            },
            error: function (error) {
            }
        });
    }

    function ClearMessageBtn_OnClick() {
        var message = $("#LeaveMessage").val("");
    }

</script>
